<template>
   <div class="main" style="background-color: white">
     <el-carousel :interval="5000" arrow="always" indicator-position="outside" style="margin-top: 0px">
       <el-carousel-item style="background-color: rgb(0, 241, 147)">
         <img :src="require(`@/assets/轮播图1.jpg`)">
       </el-carousel-item>
       <el-carousel-item style="background-color: rgb(251, 208, 85)">
         <img :src="require(`@/assets/轮播图2.jpg`)">
       </el-carousel-item>
       <el-carousel-item style="background-color: rgb(220, 210, 199)">
         <img :src="require(`@/assets/轮播图3.png`)">
       </el-carousel-item>
     </el-carousel>

     <div class="search-box">
<!--       <form action="/room">-->
<!--         <input type="search" placeholder="请输入区域、商圈或小区名" class="search-ipt" name="keywords" id="search-ipt">-->
<!--         <input type="submit" value="搜索" class="icon-search-btn search-btn js-search-btn" data-target="#search-ipt">-->
<!--       </form>-->
       <div class="b" style="line-height: 60px">
         <b style="font-size: 25px;">推荐房源:</b>
       </div>
     </div>
     <div class="res-selected" style="margin: 0 auto;width: 1250px" >

            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true" type="border-card" style="font-size: 10px">
                <el-tab-pane class="el-tab" label="租房" name="first">
                  <!--租房列表 -->
                  <div style="width: 100%;height: 100%;overflow: hidden;">
                    <el-row :gutter="20">
                      <el-col style="margin: 10px 0" :span="8" v-for="p in houseArr">
                        <el-card style="width: 400px ; height: 350px">
                          <a :href="'/lease-house-detail?houseId='+p.id">
                          <img :src="p.majorImage" width="350px" height="262px">
                          <p style="font-size: 14px;height: 15px;margin-bottom: 3px">{{ p.name }}</p >
                          <b style="color: red">￥{{ p.price }}元/月</b>
                          </a>
                        </el-card>
                      </el-col>
                    </el-row>
                  </div>
                  <!--租房列表结束 -->
                </el-tab-pane>

                <el-tab-pane label="二手房" name="second">
                  <!--二手房列表 -->
                  <div style="width: 100%;height: 100%;overflow: hidden;">
                    <el-row :gutter="20">
                      <el-col style="margin: 10px 0" :span="8" v-for="p in ershouhouseArr">
                        <el-card style="width: 400px ; height: 350px">
                          <a :href="'/second-hand-house-detail?houseId='+p.id">
                          <img :src="p.majorImage" width="350px" height="262px">
                          <p style="font-size: 14px;height: 15px;margin-bottom: 3px">{{ p.name }}</p >
                          <b style="color: red">￥{{ p.price }}元</b>
                          </a>
                        </el-card>
                      </el-col>
                    </el-row>
                  </div>
                  <!--二手房列表结束 -->
                </el-tab-pane>
                <el-tab-pane label="新房" name="third">
                  <!--买房列表 -->
                  <div style="width: 100%;height: 100%;overflow: hidden;">
                    <el-row :gutter="20">
                      <el-col style="margin: 10px 0" :span="8" v-for="p in maihouseArr">
                        <el-card style="width: 400px ; height: 350px">
                          <a :href="'/new-house-detail?houseId='+p.id">
                          <img :src="p.majorImage" width="350px" height="262px">
                          <p style="font-size: 14px;height: 15px;margin-bottom: 3px">{{ p.name }}</p >
                          <b style="color: red">￥{{ p.price }}元</b>
                          </a>
                        </el-card>
                      </el-col>
                    </el-row>
                  </div>
                  <!--买房列表结束 -->
                </el-tab-pane>
              </el-tabs>
            </template>
         </div>
        <!--房源列表开始-->
<!--        <div style="width: 100%;height: 100%;overflow: hidden;" id="">-->
<!--         <el-row :gutter="20">-->
<!--           <el-col style="margin: 10px 0" :span="8" v-for="p in houseArr">-->
<!--             <el-card style="width: 350px ; height: 300px">-->
<!--               <img src="房1.jpg" width="300px" height="212px">-->
<!--               <p style="font-size: 14px;height: 15px;margin-bottom: 3px">{{ p.name }}</p >-->
<!--               <b style="color: red">￥{{ p.price }}元/月</b>-->
<!--             </el-card>-->
<!--           </el-col>-->
<!--         </el-row>-->
<!--       </div>-->
       <!--房源列表结束-->


     <div class="reason">
        <img :src="require('@/assets/liyoux.png')" width="100%">
     </div>
     <div style="width: 100%;background: #f4f4f4">
       <img :src="require('../assets/di.png')" width="80%">
     </div>
   </div>
</template>

<script>

export default {
  data() {
    return {
      input:'',
      currentDate: new Date(),
      houseArr:[],
      ershouhouseArr:[],
      maihouseArr:[],
      sarchKey : "",
      activeName: 'second'
    };
  },
  methods: {
    loadHouseList() {
      let url = 'http://localhost:9200/house/list/recom';
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.houseArr = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    ershouHouseList() {
      let url = 'http://localhost:9200/house/list/ershourecom';
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.ershouhouseArr = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    maiHouseList() {
      let url = 'http://localhost:9200/house/list/newrecom';
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.maihouseArr = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    queryAllData() {
      this.houseArr = mock
    },
//进行关键词检索
    searchData() {
      let url = 'http://localhost:9200/house/list/sarchKey';
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
      if (this.searchKey.length == 0) {
        this.houseArr = mock
      } else {
        this.houseArr = mock.filter((data) => {
          //名称中包含输入的关键词则表示匹配成功
          return data.name.indexOf(this.searchKey) != -1
        })

      }
      });
    },
    detail(row) {
      //查看详情
      this.$router.push({ path: "mediaContent/" + row.id });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }

  },
  mounted() {
    this.loadHouseList();
    this.ershouHouseList();
    this.maiHouseList();
  }
}
</script>

<style>
.main, input {
  font-family: Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,Arial,STHeiti,sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
.main{
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #ffffff;
}
main.el-main{
  padding: 0;
}
.search-box{
  background: #ffffff;
  width: 100%;
  height: 84px;
}
.el-carousel__indicators--outside{
  background: #ffffff;
}
input.search-ipt{
  width: 775px;
  height: 46px;
  background: #fff;
  border: none;
  border-radius: 5px;
  line-height: 46px;
  box-sizing: border-box;
  padding: 0 12px;
}

input.search-ipt {
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  outline: none;
}
input[type=search] {
  -webkit-appearance: textfield;
}

body, input {
  font-family: Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,Arial,STHeiti,sans-serif;
  font-size: 14px;
}

button, input[type=button], input[type=reset], input[type=submit]{
  cursor: pointer;
  -webkit-appearance: button;
}

b{

  color: #333333;
  font-size: 14px;
}
.b{
  margin: 15px 0;
  padding-bottom: 15px;
}
.res-selected {
  background-color: #f4f4f4;
  overflow: hidden;

  position: relative;

}
.res-selected-tab {
  text-align: center;
  height: 55px;
}
.res-selected-tab .tit .tab-btn {
  border-bottom: 2px solid #3fcbc0;
  padding-bottom: 3px;
}
.res-selected-tab .tab-btn {
  display: inline-block;
  margin: 0 100px;
}
.res-selected .tit {
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  color: #555;
}
h2 {
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.res-selected-tab {
  text-align: center;
  height: 55px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 20px;
  float: right;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}
a, a:visited {
  text-decoration: none;
  border-width: 0;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.index_rigth{
  float: right;
}
.index_left{
  float: left;
}
.clearfix:after {
  clear: both
}

</style>